<template>
<div class="app">
  <router-view></router-view>
</div>
</template>
<script setup>
import MyComponent from './components/MyComponent.vue';
import RecursiveComponent from './RecursiveComponent.vue';
import {ref } from 'vue';
import {  form, formItem, input, select, button, option } from './utils/LayoutDSL';
 
   const formData={
       width: 100,
       height: 100,
   }
   const handleSubmit = () => {
    console.log(formData.value);
  };
   // 构建表单 DSL
  const page = form()
        .addChild(
          formItem().addChild(
            input().label('用户名').placeholder('请输入用户名')
              .on('input', (val) => formData.value.username = val)
          )
        )
        .addChild(
          formItem().label('性别').addChild(
            select()
              .placeholder('请选择性别')
              .addChild(option().value('male').label('男'))
              .addChild(option().value('female').label('女'))
              .on('change', (val) => formData.value.gender = val)
          )
        )
        .addChild(
          formItem().addChild(
            button().type('primary')
              .text('提交')
              .on('click', handleSubmit)
          )).build;

</script>
<style>
/* 全局样式可以保留在这里 */
</style>